<template>
  <div id="box">
    <div class="alllist"><five /></div>

    <!-- Grid宫格 -->
    <!-- <div>
      <van-grid column-num="5" icon-size="50px">
        <van-grid-item icon="sign" text="学生兼职" />
        <van-grid-item icon="phone-o" text="手机兼职" />
        <van-grid-item icon="friends-o" text="企业直招" />
        <van-grid-item icon="medal-o" text="严选兼职" />
        <van-grid-item icon="user-o" text="暑假兼职" />
      </van-grid>
    </div> -->
    <!-- 轮播 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="./img/轮播.png" alt="" /></van-swipe-item>
        <van-swipe-item><img src="./img/轮播.png" alt="" /></van-swipe-item>
        <van-swipe-item><img src="./img/轮播.png" alt="" /></van-swipe-item>
        <van-swipe-item><img src="./img/轮播.png" alt="" /></van-swipe-item>
      </van-swipe>
      <div class="swiper-bottom"><img src="./img/圆角矩形1.png" alt="" /></div>
      <div class="swiper-up"><img src="./img/圆角矩形2.png" alt="" /></div>
    </div>
    <!-- 腰部Grid -->
    <div class="loin">
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <div class="loin-item a">
            <h3>热门岗位</h3>
            <i><img src="./img/形状1.png" alt="" /></i>
            <p>快速更新</p>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="loin-item b">
            <h3>优质企业</h3>
            <i><img src="./img/形状2.png" alt="" /></i>
            <p>名企直通车</p>
          </div></van-grid-item
        >
        <van-grid-item>
          <div class="loin-item c">
            <h3>双选会</h3>
            <i><img src="./img/形状3.png" alt="" /></i>
            <p>把握机会</p>
          </div></van-grid-item
        >
      </van-grid>
    </div>
    <div class="jop">
      <div class="tuijian">
        <van-tabs v-model="activeName" color="#FBC805" background="#F3F6FF">
          <van-tab title="推荐" name="a"></van-tab>
          <p>更多</p>
        </van-tabs>
      </div>
    </div>
    <!-- 工作卡片 -->
    <xia />
    <xia />
    <xia />
  </div>
</template>

<script>
import five from "@/allwork/five";
// import Jopcard from "@/components/index/Jopcard";
import xia from "@/allwork/xia";
export default {
  components: {
    five,
    xia,
  },
  data() {
    return {
      activeName: "a",
    };
  },
};
</script>

<style>
#box {
  margin-top: 10px;
  width: 750px;
}
.alllist {
  margin-top: 20px;
}
.my-swipe {
  width: 684px;
  height: 283px;

  margin: 3.650000000000004rem auto;
  z-index: 1;
  position: relative;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.swiper img {
  display: inline-block;
  width: 684px;
  height: 283px;
}
.swiper-bottom {
  z-index: 0;
}
.swiper-bottom img {
  width: 608px;
  height: 278px;
  position: absolute;
  left: 4.625rem;
  top: 15.824999999999992rem;
}
.swiper-up img {
  width: 528px;
  height: 267px;
  position: absolute;
  left: 7.524999999999996rem;
  top: 17.42500000000001rem;
}
.loin {
  margin-top: 40px;
}
.loin-item {
  width: 211px;
  height: 140px;
  text-align: center;
  position: relative;
}
.a h3 {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #b84a45;
  line-height: 91px;
}
.a p {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #cf8784;
  line-height: 2px;
}
.b h3 {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ba8843;
  line-height: 91px;
}
.b p {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #d3aa67;
  line-height: 2px;
}
.c h3 {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4d7dd0;
  line-height: 91px;
}
.c p {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #7c9ed9;
  line-height: 2px;
}
.loin-item img {
  position: absolute;
  right: 1.3250000000000002rem;
  top: 1.8250000000000008rem;
}

.loin .a img {
  width: 23px;
  height: 29px;
}
.loin .b img {
  width: 28px;
  height: 30px;
}
.loin .c img {
  width: 33px;
  height: 27px;
}
.loin .a {
  background-image: url("./img/背景1.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.loin .b {
  background-image: url("./img/背景2.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.loin .c {
  background-image: url("./img/背景3.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.van-tabs__line {
  width: 86px;
  height: 16px;
  border-radius: 15px;
  background-color: rgb(251 200 5 / 66%) !important;
}
.van-tabs__wrap {
  margin-left: 15px;
}
.jop {
  margin-top: 10px;
  width: 46.92500000000007rem;
  margin: 0 auto;
}
.tuijian {
  overflow: hidden;
  position: relative;
}
.tuijian p {
  position: absolute;
  right: 10px;
  top: -20px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 91px;
  margin-right: 1.3250000000000004rem;
}
</style>
